<template>
	<view>
        
	    <!-- 绑定事件播放音乐 -->
		<view class="component-area" @click="toPlaying" v-if="playBarData.name">
			
			<!-- 专辑封面 -->
            <view ref="cv" class="cover" :class="{rotate: playing}">
				<!-- :style="{transform: 'rotate(' + angle + 'deg)'}" -->
                <image :src="playBarData.cover + '?param=80y80'" mode="aspectFit"></image>
            </view>
			
			<!-- 歌曲信息 -->
            <view class="info">
                <text class="song-name">{{playBarData.name}}</text>
                <text class="artist-name">{{playBarData.artist}}</text>
            </view>
			
			<!-- 上一首 -->
            <view class="control" @click.stop="prevAudio">
                <cmd-icon class="prev-btn" type="prev" size="32" color="red"></cmd-icon>
            </view>

			<!-- 播放按钮 -->
            <view class="control" @click.stop="playing ? pauseAudio() : playAudio()">
                <cmd-icon class="play-btn" :type="playing ? 'pause' : 'play'" size="32" color="red"></cmd-icon>
            </view>

			<!-- 下一首 -->
            <view class="control" @click.stop="nextAudio">
                <cmd-icon class="next-btn" type="next" size="32" color="red"></cmd-icon>
            </view>

            <!-- 播放模式 -->
            <view class="control" @click.stop="setPlayMode()">
                <cmd-icon class='play-mode' :type="chousePlayMode" size="32" color="red"></cmd-icon>
            </view>

            <!-- 下载按钮 -->
            <view class="control" @click.stop="downloadAudio">
                <cmd-icon type="download" size="32" color="red"></cmd-icon>
            </view>
			
		</view>
		
	</view>
</template>

<script>
	import Vuex from 'vuex';
	import cmdIcon from "@/components/cmd-icon/cmd-icon.vue";
	
	export default {
		components: {
			cmdIcon
		},
		data() {
			return {
				angle: 0
			}
		},
		computed: {
			...Vuex.mapState([
                'audio',
                'playBarData',
                'playing',
                'playMode',
                'playIndex',
                'playHistoryData',
				'coverAngle'
            ]),
            chousePlayMode() {
                switch(this.playMode){
                    case 'single' :
                        return 'reload';
                        break;
                    case 'list' :
                        return 'playlist';
                        break;
                    case 'random' :
                        return 'shuffle-play';
                }
            }
		},
		methods: {
			...Vuex.mapActions([
                'setPlayDataAndPlay'
            ]),
            ...Vuex.mapMutations([
                'playAudio',
                'pauseAudio',
                'setPlayMode',
                'setPlayIndex',
				'setCoverAngle'
            ]),
			toPlaying() {
				uni.navigateTo({
					url: '/pages/playing/playing'
				})
			},
            // 上一首音乐按钮handle
			prevAudio() {
				// 单曲循环模式
				if (this.playMode === 'single') {
					// 直接播放即可
					this.playAudio();
				} else if (this.playMode === 'list') {
					// 列表循环模式
					if (this.playIndex === 0) {
						this.setPlayIndex(this.playHistoryData.length - 1);
					} else {
						this.setPlayIndex(this.playIndex - 1);	// 播放上一曲
					}
					this.setPlayDataAndPlay();						// 设定源地址, 详情和歌词数据
				} else if (this.playMode === 'random') {
					// 随机播放模式
					this.setPlayIndex(Math.floor(Math.random()*(this.playHistoryData.length)));	// 取可用的随机数
					this.setPlayDataAndPlay();	// 设定源地址, 详情和歌词数据
				}
			},
            // 下一首音乐按钮handle
			nextAudio() {
				// 单曲循环模式
				if (this.playMode === 'single') {
					// 直接播放即可
					this.playAudio()
				} else if(this.playMode === 'list') {
					// 列表循环模式
					if (this.playIndex === this.playHistoryData.length - 1) {
						this.setPlayIndex(0);	// 如果是最后一首就播放第0首
					} else {
						this.setPlayIndex(this.playIndex + 1);	// 否则播放下一曲
					}
					this.setPlayDataAndPlay();						// 设定源地址, 详情和歌词数据
				} else if (this.playMode === 'random') {
					// 随机播放模式
					this.setPlayIndex(Math.floor(Math.random()*(this.playHistoryData.length)));	// 取可用的随机数
					this.setPlayDataAndPlay();	// 设定源地址, 详情和歌词数据
				}
			},
			// 下载音乐按钮handle
            downloadAudio() {
                uni.downloadFile({
                    url: this.audio.src,
                    success: (res) => {
                        //console.log(res);
                        //#ifdef H5
                        let a = document.createElement('a');
                        a.href = res.tempFilePath;
                        a.download = `${this.playBarData.artist} - ${this.playBarData.name}.mp3`;
                        a.click();
                        //#endif
                        //#ifdef APP-PLUS
                        uni.saveFile({
                            tempFilePath: res.tempFilePath
                        })
                        //#endif
                    }
                })
            }
		}
	}
</script>

<style>
	
	@keyframes ani-rotate{
		from{transform: rotate(0deg)}
		to{transform: rotate(360deg)}
	}
	
	/* 组件整体 */
    .component-area {
        width: 750upx;
        height: 100upx;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        background-color: rgba(255,255,255,.9);
        box-shadow: 0 0 1upx 2upx black;
    }

    /* 专辑封面 */
    .cover {
        width: 80upx;
        height: 80upx;
		animation: ani-rotate 30s linear infinite;
		animation-play-state: paused;
    }
	
	.rotate {
		animation-play-state: running;
	}
	
	/* 专辑封面图片调整 */
	.cover image {
		width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: 0 0 1upx 1upx black;
	}

	/* 播放详情信息 */
    .info {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        width: 250upx;
        height: 80upx;
        /* background-color: orange; */
    }

	/* 歌曲名样式 */
    .song-name {
        font-weight: bold;
    }

	/* 作曲家样式 */
    .artist-name {
        font-size: 20upx;
    }

	/* 控制按钮样式 */
    .control {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60upx;
        height: 60upx;
    }
    
</style>